<template>
	<div id="index">
		<!--		<dv-loading v-if="loading">Loading...</dv-loading>-->
		<div class="bgimg">
			<!-- <iframe src='http://www.thingjs.com/pp/827c8b262941ec20290b68f6' width="100%" height="100%"
				frameborder="no" allowtransparency="yes" ref="myIframe">
			</iframe> -->
		</div>

		<div class="d-flex" style="position: relative;
					z-index: 1;
					justify-content: space-between;
					align-items: center;
			">
			<div class="date-time date-time--left">
				{{ nowTime.dateTime || '' }}
			</div>
			<div class="flex-col" style="position: relative; width: 100%;">
				<img src="~@/assets/title.png" style="width: 100%;" />
				<div class="header-title" style="color: #fff; margin-bottom: .1rem;">
					公共实训中心智能制造数据看板
				</div>
			</div>
			<div class="date-time date-time--right">
				{{ `${nowTime.week || ''} ${nowTime.time || ''}` }}
			</div>
		</div>

		<div class="content">
			<div style="width: 30vw;">
				<div style="width: 30vw;">
					<div style="width: 30vw;">
						<div style="width: 90%;margin: auto;">
							<strong class="text">采购统计</strong>
							<!--							<dv-scroll-board-->
							<!--								:config="purchase"-->
							<!--								style="width:100%;"-->
							<!--                :style="{-->
							<!--									height: px2vh(150)-->
							<!--								}"-->
							<!--							/>-->
							<!--							<div class="d-flex jc-center" style="flex-direction: column; align-items: center;">-->
							<!--								<div>-->
							<!--									<RingChart-->
							<!--										:data="ringChatData.data"-->
							<!--										name="库存"-->
							<!--										:width="px2vw(150)"-->
							<!--										:height="px2vw(150)"-->
							<!--									/>-->
							<!--								</div>-->
							<!--								<div class="d-flex">-->
							<!--									<RingChart-->
							<!--										:data="ringChatData.data"-->
							<!--										name="入库"-->
							<!--										:width="px2vw(130)"-->
							<!--										:height="px2vw(130)"-->
							<!--									/>-->
							<!--									<div style="width: 20px;height: 1px;" />-->
							<!--									<RingChart-->
							<!--										:data="ringChatData.data"-->
							<!--										name="出库"-->
							<!--										:width="px2vw(130)"-->
							<!--										:height="px2vw(130)"-->
							<!--									/>-->
							<!--								</div>-->
							<!--							</div>-->
							<div class="bar-1" :style="{
					marginTop: px2vh(20)
				}">
								<div class="bar-chart" ref="barChart" v-chart-resize style="width: 100%;" :style="{
					height: px2vh(200)
				}" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" />
								<!--				<dv-capsule-chart :config="bar1" style="width:100%;" :style="{-->
								<!--					height: px2vh(120),-->
								<!--					padding: px2vh(10)-->
								<!--				}" />-->
								<!--				<dv-capsule-chart :config="bar1" style="width:100%;" :style="{-->
								<!--					height: px2vh(120),-->
								<!--					padding: px2vh(10)-->
								<!--				}" />-->
							</div>
						</div>

					</div>
				</div>

				<div :style="{
					margin: `${px2vh(40)} 0`
				}">
					<div>
						<div style="width: 90%;margin: auto;">
							<div
								style="width: 100%;display: flex;justify-content: start;"
							>
								<strong class="text">实训室使用情况</strong>
							</div>
							<dv-scroll-board :config="purchase2" style="width:100%;" :style="{
					height: px2vh(200)
				}" background-color="#243563" />
						</div>
					</div>

				</div>

				<div :style="{
					marginTop: px2vh(10)
				}">
					<div>
						<div style="width: 90%;margin: auto;text-align: center;">
							<div
								style="width: 100%;display: flex;justify-content: start;"
							>
								<strong class="text">实时画面</strong>
							</div>
							<div style="
									width: 100%;
									background-color: #003346;
									border-radius: 10px;
								" :style="{
					height: px2vh(260)
				}">
								<div id="divPlugin" style="width: 100%;height: 100%;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="width: 40vw; margin: 0 0.3rem; position: relative;">

				<div>
					<div>
						<div class="data d-flex" style="justify-content: center;">
							<GaugeChart title="运行机床数" :data="num.run" />
							<GaugeChart style="margin: 0 10px;" title="报警机床数" :data="num.defect" />
							<GaugeChart title="空闲机床数" :data="num.idle" />
						</div>
					</div>

				</div>
				<div class="img">
					<img class="img" src="@/assets/bg.png" />
				</div>
			</div>

			<div style="width: 30vw;">
				<div>
					<div>
						<div style="width: 90%;
							border-radius: 10px;
							text-align: center;" :style="{
					padding: px2vh(0)
				}" :class="stateStyle.block">
							<div
								style="width: 100%;display: flex;justify-content: start;"
							>
								<strong class="text" :class="stateStyle.title">
									当前状态：{{ nowState }}
								</strong>
							</div>
							<div>
								<div class="d-flex" style="align-items: center;">
									<div class="cover">
										<img src="~@/assets/lathe.jpg"
											style="width: 100%; height: 100%;object-fit: cover;" />
									</div>
									<div>
										<div class="block">
											机床名称：{{ jc.jcmc }}
										</div>
										<div class="block">
											机床型号：{{ jc.jcxh }}
										</div>
										<div class="block">
											警报状态：{{ jc.jbzt == 0 ? '正常' : '报警' }}
										</div>
									</div>
								</div>

								<div class="d-flex row" :class="stateStyle.row">
									<div class="block">
										主轴转速：{{ jc.zzzz }}R/Min
									</div>
									<div class="block">
										进给倍率：{{ jc.zzzz }}MM/Min
									</div>


									<div class="block">
										单次加工数量：{{ jc.dcjgs }}件
									</div>
									<div class="block">
										加工总数：{{ jc.jgzs }}件
									</div>
									<div class="block">
										运行总时间：{{ formatSecondsToTime(jc.yxsj) }}
									</div>
									<div class="block">
										开机总时间：{{ formatSecondsToTime(jc.kjsj) }}
									</div>
									<div class="block">
										平均节拍：{{ jc.pjjp }}
									</div>
									<div class="block" v-if="jc.jbzt == 1">
										报警信息：{{ jc.bjxx }}
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
				<div :style="{
					marginTop: px2vh(30)
				}">
					<div>
						<div class="d-flex jc-center" style="flex-direction: column; align-items: center;">
							<div
								style="width: 100%;display: flex;justify-content: start;"
							>
								<strong class="text">库存占比</strong>
							</div>
							<div>
								<div id="main_zkc" :style="'width:' + px2vw(400) + ';height:' + px2vw(450)"></div>
								<!-- <RingChart
									:data="zkc"
									name="库存"
									:width="px2vw(180)"
									:height="px2vw(180)"
								/> -->
							</div>
							<!-- <div class="d-flex">
								<div id="main_ckc" :style="'width:' + px2vw(200) + ';height:' + px2vw(180)"></div>
								<div id="main_jkc" :style="'width:' + px2vw(200) + ';height:' + px2vw(180)"></div>
								<RingChart :data="jkc" name="入库" :width="px2vw(150)" :height="px2vw(150)" />
								<div style="width: 20px;height: 1px;" />
								<RingChart :data="ckc" name="出库" :width="px2vw(150)" :height="px2vw(150)" />
							</div> -->
						</div>
					</div>
				</div>
				<!--				<div-->
				<!--					:style="{-->
				<!--						marginTop: px2vh(30)-->
				<!--					}"-->
				<!--				>-->
				<!--					<dv-border-box-1>-->
				<!--						<div style="width: 90%;margin: auto;text-align: center;">-->
				<!--							<strong class="text">实时画面</strong>-->
				<!--							<div-->
				<!--								style="-->
				<!--									width: 100%;-->
				<!--									background-color: #003346;-->
				<!--									border-radius: 10px;-->
				<!--								"-->
				<!--								:style="{-->
				<!--									height: px2vh(260)-->
				<!--								}"-->
				<!--							>-->
				<!--								<div id="divPlugin" style="width: 100%;height: 100%;"></div>-->
				<!--							</div>-->
				<!--						</div>-->
				<!--					</dv-border-box-1>-->
				<!--				</div>-->
			</div>

		</div>
		<!--		</div>-->
	</div>
</template>

<script>
import { formatTime, px2vh, px2vw } from '../utils/index.js'
import Card from '@/components/Card.vue'
import * as echarts from "echarts";
import axios from 'axios';
import qs from 'qs';
import GaugeChart from "_c/GaugeChart.vue";
import RingChart from "_c/RingChart.vue";

export default {
	data() {
		return {
			loading: true,
			dateDay: null,
			dateYear: null,
			dateWeek: null,
			weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
			szIP: '10.48.218.11',     //IP地址
			iPrototocol: 1,
			iPort: '80',               //端口号
			szUserName: 'admin',        //用户名
			szPassword: 'abc12345',   //管理员密码
			ids: [],
			videos: [],
			nowTime: '',
			chartInstance: null,
			jc: {
				yxsj: 0,
				kjsj: 0,
				zzzz: 1,
				jbzt: 1
			},
			ck: {},
			jc_id: null,
			num: {
				run: 0,
				defect: 0,
				idle: 0
			},
			camera_id: 38,
			scrollSpeed: 10,
			dataZoomStart: 0,
			dataZoomEnd: 30,
			isAutoScrolling: false,
			autoScrollInterval: null,
			zkc: [{
				name: '工装',
				value: 200
			},
			{
				name: '夹具',
				value: 200
			},
			{
				name: '刀具',
				value: 500
			},
			{
				name: '辅料',
				value: 100
			}],
			kc: [],
			ckc: [],
			class: [],
			// test: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			// test2: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130]
		};
	},
	components: {
		RingChart,
		Card,
		GaugeChart
	},
	computed: {
		ringChatData() {
			return {
				data: [
					{ name: '类目1', value: 50 },
					{ name: '类目2', value: 10 },
					{ name: '类目3', value: 20 },
					{ name: '类目4', value: 20 },
					{ name: '类目5', value: 20 }
				]
			}
		},
		stateStyle() {
			const state = this.jc.zzzz
			const warning = this.jc.jbzt
			const title = state === 0 ? 'text--stop' : warning === 1 ? 'text--warning' : ''
			const block = state === 0 ? 'block--stop' : ''
			const row = state === 0 ? 'row--stop' : ''
			return {
				title,
				block,
				row
			}
		},

		nowState() {
			const state = this.jc.zzzz
			const warning = this.jc.jbzt
			return state === 0 ? '未运行' : warning === 1 ? '报警中' : '正在运行'
		},

		borderColor() {
			return ['#344EA5', '#24C9E7']
		},

		purchase() {
			const data = [
				['工装', '323', '32', '1'],
				['夹具', '323', '32', '1'],
				['刀具', '323', '32', '1'],
				['辅料', '323', '32', '1'],
				['刀具', '323', '32', '1'],
				['辅料', '323', '32', '1'],
				['夹具', '323', '32', '1'],
				['刀具', '323', '32', '1'],
			].map(item => {
				return item.map(text => {
					return `<span style="font-size: ${px2vw(16)}">${text}</span>`
				})
			})
			return {
				header: ['物料分类', '采购数量', '已领数量', '库存数量'],
				data,
				headerBGC: 'rgb(34, 67, 118)'
			}
		},
		bar1() {
			return {
				data: [
					{
						name: '工装',
						value: 200
					},
					{
						name: '夹具',
						value: 200
					},
					{
						name: '刀具',
						value: 500
					},
					{
						name: '辅料',
						value: 100
					}
				],
				showValue: true
			}
		},

		purchase2() {
			const data = [
				['实训室1', '数控车床', 'DT40H-17', '120', '2'],
				['实训室2', '立式加工中心', 'VFP-40A-18', '110', '3'],
				['实训室3', '立式加工中心', 'VFP-40A-18', '110', '3'],
				['实训室4', '六关节机器人', 'LRMate200iD-10', '132', '3'],
				['实训室5', '六关节机器人', 'LRMate200iD-10', '143', '33'],
				['实训室6', '六关节机器人', 'LRMate200iD-11', '89', '33'],
				['实训室7', '六关节机器人', 'LRMate200iD-11', '90', '66'],
				['实训室8', '六关节机器人', 'LRMate200iD-11', '67', '33'],
				['实训室9', '数控车床', 'DT40H-17', '999', '32'],
				['实训室10', '数控车床', 'DT40H-17', '123', '5'],
			].map(item => {
				return item.map(text => {
					return `<span style="font-size: ${px2vw(16)}">${text}</span>`
				})
			})
			const vw = (45 * 100.0) / 1920
			return {
				header: ['实训室名称', '设备名称', '规格型号', '总寿命(月)', '已用(月)'],
				data,
				oddRowBGC: 'rgba(0, 59, 81, .8)',
				evenRowBGC: 'rgba(10, 39, 50, .8)',
				headerBGC: 'rgba(34, 67, 118, .8)',
				headerHeight: (vw * 1920) / 100.0
			}
		},
	},
	destroyed() {
		setTimeout(() => {
			this.destruction()
		}, 100)
	},
	mounted() {
		this.getNowTime()
		this.stopSee()
		this.logout()
		this.destruction()
		this.timeFn();
		this.cancelLoading();
		// this.iframeFn()
		// this.initChart()
		this.init_jc();
		this.init_ck();
		this.init_ck_b();
		this.init_num();
		this.initCM()
		this.ws = new WebSocket('ws://10.48.219.10:8090'); // 将 localhost 替换为服务器的局域网 IP 地址
		var that = this
		this.ws.onmessage = async (event) => {
			if (event.data instanceof Blob) {
				const text = await event.data.text();
				console.log('Message from server2: ', text);
				var data = JSON.parse(text)
				if (data.type == 'camera') {
					that.camera_id = data.id
					that.stopSee()
					that.logout()
					that.destruction()
					that.initCM()
				}
				if (data.type == 'mes') {
					that.init_jc(data.id)
				}
			} else {
				console.log('Message from server3: ', event.data);
			}
		};
		// window.onresize = () => {
		// 	this.resizeTo()
		// }
		setInterval(function () {
			that.init_jc();
			that.init_ck();
			that.init_ck_b();
		}, 600000); // 每10分钟刷新一次
	},
	methods: {
		px2vw,
		px2vh,
		initChart(data, series) {
			var dataCount = data.length;
			var showCount = 5; // 每次展示的数据条数
			var endValue = (showCount / dataCount) * 100; // 计算end的百分比
			const options = {
				xAxis: {
					type: 'category',
					data: data,
					axisLine: {
						// show: true,
						lineStyle: {
							color: '#fff'
						}
					},
					axisLabel: {
						textStyle: {
							fontSize: this.fitChartSize(16)
						},
						interval: 0
					}
				},
				yAxis: {
					type: 'value',
					name: '',
					axisLine: {
						// show: true,
						lineStyle: {
							color: '#fff',
						}
					},
					axisLabel: {
						textStyle: {
							fontSize: this.fitChartSize(16)
						}
					}
				},
				grid: {
					left: this.fitChartSize(5),
					right: this.fitChartSize(5),
					top: this.fitChartSize(20),
					bottom: this.fitChartSize(10),
					containLabel: true,
				},
				series: [
					{
						type: 'bar',
						data: series,
						barWidth: this.fitChartSize(30),
						barGap: this.fitChartSize(.5),
						color: '#F59C42',
						label: {
							show: true,
							position: 'top',
							distance: 0,
							fontSize: this.fitChartSize(16),
							color: '#fff'
						}
					}
				],
				dataZoom: [
					{
						type: 'inside', // 内置型数据缩放组件，鼠标滚轮可操作
						xAxisIndex: [0],
						start: 0,
						end: endValue
					}
				]
			}
			this.chartInstance = echarts.init(this.$refs.barChart)

			this.chartInstance.setOption(options)
			// this.startAutoScroll()
			// 自动播放
			var currentIndex = 0;
			var that = this
			setInterval(function () {
				currentIndex += 1;
				if (currentIndex * showCount >= dataCount) {
					currentIndex = 0;
				}
				that.chartInstance.setOption({
					dataZoom: [
						{
							start: (currentIndex * showCount / dataCount) * 100,
							end: ((currentIndex + 1) * showCount / dataCount) * 100
						}
					]
				});
			}, 2000); // 每2秒切换一次
		},
		init_jc(id = 1) {
			var that = this
			axios({
				method: 'get',
				url: 'http://10.48.219.10:3620/jtech/cnc?deviceId=' + id,
			})
				.then(response => {
					// 处理响应数据
					console.log(response.data);
					if (response.data.deviceId) {
						that.jc = response.data
					}

				})
				.catch(error => {
					// 处理错误
					console.error(error);
				});
		},
		init_ck() {
			var that = this
			axios({
				method: 'get',
				url: 'http://10.48.219.10:3610/jtech/warehouse',
			})
				.then(response => {
					// 处理响应数据
					console.log(response.data);
					if (response.data) {
						let datas = []
						let seriess = []
						response.data.forEach(element => {
							datas.push(element.descript)
							seriess.push(element.quantity)
						});
						console.log(datas)
						that.initChart(datas, seriess)
					}
				})
				.catch(error => {
					// 处理错误
					console.error(error);
				});
		},
		init_ck_b() {
			var that = this
			axios({
				method: 'get',
				url: 'http://10.48.219.10:3610/jtech/quantity',
			})
				.then(response => {
					// 处理响应数据
					console.log(response.data);
					if (response.data) {
						let zkc = []
						let jkc = []
						let ckc = []
						let color = ['#f79342', '#72c578','#64ED61','#D9251C', '#48009c','#61EDD1']
						response.data.forEach((element, i) => {
							that.class.push(element.category)
							if (i <= 5) {
								zkc.push({
									name: element.category,
									value: element.instore,
									itemStyle: { normal: { color: color[i] } }
								})
								jkc.push({
									name: element.category,
									value: element.comein,
									itemStyle: { normal: { color: color[i] } }
								})
								ckc.push({
									name: element.category,
									value: element.goout,
									itemStyle: { normal: { color: color[i] } }
								})
							} else {
								zkc.push({
									name: element.category,
									value: element.instore
								})
								jkc.push({
									name: element.category,
									value: element.comein
								})
								ckc.push({
									name: element.category,
									value: element.goout
								})
							}
						});
						console.log(zkc)
						that.kc = [{
							title: '总库存',
							data: zkc
						}, {
							title: '入库存',
							data: jkc
						}, {
							title: '出库存',
							data: ckc
						}]
						var currentIndex = 0;
						// 初始渲染第一个饼图
						that.initzkcChart(currentIndex);
						function startCarousel() {
							setTimeout(function () {
								currentIndex = (currentIndex + 1) % that.kc.length;
								that.initzkcChart(currentIndex);
								startCarousel();
							}, 5000); // 每2秒切换一次
						}
						startCarousel();
					}
				})
				.catch(error => {
					// 处理错误
					console.error(error);
				});
		},
		initzkcChart(index) {
			var chartDom = document.getElementById('main_zkc');
			var myChart = echarts.init(chartDom);

			var option;
			option = {
				title: {
					text: this.kc[index].title,
					left: 'center',
					textStyle: {
						color: '#FFFFFF' // 标题颜色设置为白色
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}: {c} ({d}%)"
				},
				legend: {
					orient: 'horizontal',
					bottom: 0,
					left: 'center',
					data: this.class,
					textStyle: {
						color: '#FFFFFF' // 标题颜色设置为白色
					}
				},
				series: [
					{
						name: this.kc[index].title,
						type: 'pie',
						data: this.kc[index].data,
						radius: '70%',
						label: {
							normal: {
								show: false, // 显示标签
								position: 'outside', // 标签的位置
								formatter: '{b}: {c} ({d}%)', // 标签的格式化器
								textStyle: { // 标签文字的样式
									color: '#fff', // 文字颜色设为白色
									fontSize: 14
								}
							}
						},
						labelLine: {
							normal: {
								show: false, // 是否显示标签线
								length: 10, // 标签线的长度
								length2: 10 // 标签线的第二段长度
							}
						},
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};

			option && myChart.setOption(option);

		},
		init_num() {
			var that = this
			axios({
				method: 'get',
				url: 'http://10.48.219.10:3620/jtech/cncstat',
			})
				.then(response => {
					// 处理响应数据
					console.log(response.data);
					if (response.data) {
						that.num = response.data
						console.log(that.num);
					}
				})
				.catch(error => {
					// 处理错误
					console.error(error);

				});
		},
		resizeTo() {
			var el = document.documentElement || document.body
			var pageW = el.clientWidth
			// 屏幕的缩放比
			var scale = pageW / 1536
			var mainEl = document.getElementById("app")
			mainEl.style.zoom = scale
		},
		getNowTime() {
			setInterval(() => {
				this.nowTime = this.timeFormat()
			}, 1000)
		},
		timeFormat() {
			const now = new Date();

			const year = now.getFullYear();

			const month = (now.getMonth() + 1).toString().padStart(2, '0');

			const date = now.getDate().toString().padStart(2, '0');

			const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			const weekday = weekdays[now.getDay()];

			const hours = now.getHours().toString().padStart(2, '0');

			const minutes = now.getMinutes().toString().padStart(2, '0');

			const seconds = now.getSeconds().toString().padStart(2, '0');

			const formattedTime = `${year}年${month}月${date}日 星期${weekday} ${hours}:${minutes}:${seconds}`;
			const dateTime = `${year}年${month}月${date}日`
			const week = `星期${weekday}`
			const time = `${hours}:${minutes}:${seconds}`
			return {
				formattedTime,
				dateTime,
				week,
				time
			};
		},
		timeFn() {
			setInterval(() => {
				this.dateDay = formatTime(new Date(), 'HH: mm: ss');
				this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
				this.dateWeek = this.weekday[new Date().getDay()];
			}, 1000)
		},
		cancelLoading() {
			setTimeout(() => {
				this.loading = false;
			}, 1000);
		},

		iframeFn() {
			const contentWindow = this.$refs.myIframe?.contentWindow
			this.$refs.myIframe.onload = () => {
				contentWindow.postMessage('子传父', '*')
			}
		},
		stopSee() {
			// 停止单独的窗口
			WebVideoCtrl.I_Stop({
				iWndIndex: 0, // 想要停止的窗口
				success: () => {
					console.log('停止预览')
				}
			})
			// 停止所有窗口
			// WebVideoCtrl.I_StopAllPlay()
		},
		// 退出登录
		logout() {
			WebVideoCtrl.I_Logout(this.szIP + '_' + this.iPort)
		},
		// 销毁插件
		destruction() {
			WebVideoCtrl.I_DestroyPlugin()
		},
		test() {
			WebVideoCtrl.I_StartRealPlay(this.szIP + '_' + this.iPort, {
				// iWndIndex: 1,
				iChannelID: this.ids[0], // 如果播放通道号给错了，浏览器会报代码为1000的错误
				success: () => {
					console.log('预览成功')
				}
			})
		},
		initCM() {
			var that = this
			console.log()
			WebVideoCtrl.I_InitPlugin({
				iWndowType: 1,
				bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
				cbInitPluginComplete: function () {
					WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
						// 检查插件是否最新
						WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
							if (bFlag) {
								console.log("152检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
							}

							WebVideoCtrl.I_Login(that.szIP, that.iPrototocol, that.iPort, that.szUserName, that.szPassword, {
								timeout: 3000,
								success: function () {
									console.log("登录成功");
									const szDeviceIdentify = that.szIP;
									setTimeout(function () {
										that.getChannelInfo(szDeviceIdentify);
									}, 1000);

								},
								error: function (err) {
									console.log(err, "登录失败");
								}
							});


						});
					}, () => {
						console.log("152插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
					});
				},
			});
		},
		formatSecondsToTime(seconds) {
			let hours = Math.floor(seconds / 3600);
			let minutes = Math.floor((seconds % 3600) / 60);
			let formattedHours = hours.toString().padStart(2, '0');
			let formattedMinutes = minutes.toString().padStart(2, '0');
			return `${formattedHours}小时${formattedMinutes}分`;
		},
		getChannelInfo(szDeviceIdentify) {
			var that = this

			WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
				success: function (xmlDoc) {
					var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
					$.each(oChannels, function (i) {
						var id = $(this).find("id").eq(0).text(),
							name = $(this).find("name").eq(0).text(),
							online = $(this).find("online").eq(0).text();
						if ("false" == online) {// 过滤禁用的数字通道
							return true;
						}
						if ("" == name) {
							name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
						}
						that.videos.push({
							id: id,
							name: name,
							online: online
						})
						that.ids.push(id)

					});
					console.log(szDeviceIdentify + " 获取数字通道成功！");
					console.log(that.ids)
					console.log(that.videos)
					setTimeout(function () {
						WebVideoCtrl.I_StartRealPlay(that.szIP + '_' + that.iPort, {
							// iWndIndex: 1,
							iChannelID: that.camera_id, // 如果播放通道号给错了，浏览器会报代码为1000的错误
							success: () => {
								console.log('预览成功')
							}
						})
					}, 1000);

				},
				error: function (oError) {
					console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
				}
			});
			// 零通道
			// WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
			// 	success: function (xmlDoc) {
			// 		var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
			// 		$.each(oChannels, function (i) {
			// 			var id = $(this).find("id").eq(0).text(),
			// 				name = $(this).find("name").eq(0).text(),
			// 				online = $(this).find("online").eq(0).text();
			// 			if ("false" == online) {// 过滤禁用的数字通道
			// 				return true;
			// 			}
			// 			if ("" == name) {
			// 				name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
			// 			}
			// 			that.ids.push(id)
			// 		});
			// 		console.log(szDeviceIdentify + " 获取ling通道成功！");
			// 		console.log(that.ids)
			// 	},
			// 	error: function (oError) {
			// 		console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
			// 	}
			// });

		},
		autoScroll() {
			if (this.isAutoScrolling && this.dataZoomEnd < 100) {
				this.dataZoomEnd += this.scrollSpeed;
				this.dataZoomStart += this.scrollSpeed;
				this.chartInstance.dispatchAction({
					type: 'dataZoom',
					start: this.dataZoomStart,
					end: this.dataZoomEnd
				});
			} else {
				// 当滚动到尽头或者需要停止时，重置并停止滚动
				clearInterval(this.autoScrollInterval);
				this.dataZoomEnd = 30;
				this.dataZoomStart = 0
				this.isAutoScrolling = false;
				this.startAutoScroll()
			}
		},

		startAutoScroll() {
			if (!this.isAutoScrolling) {
				this.isAutoScrolling = true;
				this.autoScrollInterval = setInterval(this.autoScroll, 50000 / this.scrollSpeed); // 根据速度调整间隔时间
			}
		},
		stopAutoScroll() {
			this.isAutoScrolling = false;
			clearInterval(this.autoScrollInterval);
		},
		handleMouseEnter(e) {
			this.stopAutoScroll()
		},
		handleMouseLeave(e) {
			this.startAutoScroll()
		}
	}
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';

.content {
	height: 100%;
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	padding: 0.2rem;
}

.block {
	display: flex;
	justify-content: space-between;
	color: #fff;
	margin-bottom: vh(40);
	font-size: vw(16);

	&:last-child {
		margin-bottom: 0;
	}

	.key {
		color: #4E95C4;
	}
}

.headers {
	padding: 0.2rem 0 0 0;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
}

.flex-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.img {
	position: absolute;
	left: 50%;
	top: 60%;
	width: 70vw;
	height: 70vh;
	transform: translate(-50%, -50%);
	z-index: -999999;

	>img {
		width: 80%;
		height: auto;
		// object-fit: cover;
	}
}

.date-time {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: vw(25);
	color: #4E95C4;
	//color: rgb(126, 198, 153);
	box-sizing: border-box;

	&--left {
		left: vw(30);
	}

	&--right {
		right: vw(30);
	}
}

.test {
	border: 1px solid transparent;
	border-width: .6375rem .475rem .25rem 1.65rem;
	border-image-source: url("../assets/boder.png");
	border-image-slice: 51 38 20 132;

}

.dv-border-box-1 .border-box-content {
	padding: vw(30) 0;
}

.dv-border-box-7 .border-box-content {
	padding: vw(15) 0;
}

#index {
	overflow: hidden;
	background-color: #121d53 !important;
}

.text {
	font-size: vw(20);
	color: #fff;
	margin-bottom: vh(30);
	display: block;
}

.header-title {
	position: absolute;
	font-size: vw(35);
}

.content-box {
	position: relative;
	z-index: 1;
	padding: 0.2rem 0.2rem 0 0.2rem;
}

.cover {
	width: vw(120);
	height: vw(120);
	border-radius: 10px;
	background-color: #fff;
	overflow: hidden;
	margin-right: vw(20);
}

.row {
	margin-top: vw(20);
	flex-wrap: wrap;
	border-radius: 10px;
	background-color: rgb(72 0 156);
	padding: vw(20);

	>.block {
		width: 50%;

	}

	&--stop {
		background-color: rgba(255, 255, 255, .1);
	}
}

.text--warning {
	color: #E6A23C;
}

.text--stop {
	color: #C0C4CC;
}

.block--stop {
	opacity: .8;
}

.data {
	&__block {
		text-align: center;

		//padding: vw(10) vw(40);
		&__title {
			font-size: vw(20);
			margin-bottom: vw(30);
			color: #68D8FE;
		}

		&__num {
			font-size: vw(40);
			color: #fff;
			font-family: electronicFont;
			font-weight: bold;
		}
	}
}
</style>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';

::v-deep .header-item {
	//height: vh(80) !important;
	//line-height: vh(80) !important;
	font-size: vw(16) !important;
}

::v-deep .capsule-item {
	height: vh(10) !important;
	box-shadow: 0 0 vh(3) #999;
	margin: vh(5) 0;
	border-radius: vw(5);
}

::v-deep .capsule-item-column {
	height: vh(8) !important;
	margin-top: vh(1) !important;
}

::v-deep .capsule-item-value {
	font-size: vw(12) !important;
}

::v-deep .label-column {
	font-size: vw(12) !important;
	padding-right: vw(10) !important;
}

::v-deep .unit-label {
	font-size: vw(12) !important;
	height: vh(20) !important;
}

::v-deep .label-column>div {
	height: vh(20) !important;
	line-height: vh(20) !important;
}
</style>